<template>
	<view class="_showModal" v-show="show">
		<view class="_shade"></view>
		<view class="_modalBox">
			<view class="_modal">
				<view class="title" v-if="title">{{title}}</view>
				<view class="title" v-if="ntitle">{{ntitle}}</view>
				<view class="content flex align-center flex-direction">
					<slot v-if="!content && !rich"></slot>
					<image class="image" v-if="icon&&icon!=='none'" :src="icon" mode=""></image>
					<view v-if="content">{{content}}</view>
					<rich-text v-if="rich && rich" :nodes="rich"></rich-text>
					<view class="tips" v-if="tips">{{tips}}</view>
				</view>
				<view class="btnbox">
					<view class="btn cancel" v-if="showCancel"
						@click.stop="clickBtn('cancel')">{{cancelText}}</view>
					<view class="btn_line" v-if="showCancel">
						
					</view>
					<view class="btn confirm"
						@click.stop="clickBtn('confirm')">{{confirmText}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "show-modal",
		computed: {
			show() {
				return this.$modalStore.state.show;
			},
			title() {
				return this.$modalStore.state.title;
			},
			content() {
				return this.$modalStore.state.content;
			},

			tips(){
				return this.$modalStore.state.tips;
			},
			showCancel() {
				return this.$modalStore.state.showCancel;
			},
			cancelText() {
				return this.$modalStore.state.cancelText;
			},
			cancelColor() {
				return this.$modalStore.state.cancelColor;
			},
			cancelBackgroundColor() {
				return this.$modalStore.state.cancelBackgroundColor;
			},
			confirmText() {
				return this.$modalStore.state.confirmText;
			},
			confirmColor() {
				return this.$modalStore.state.confirmColor;
			},
			confirmBackgroundColor() {
				return this.$modalStore.state.confirmBackgroundColor;
			},
			icon() {
				return this.$modalStore.state.icon;
			},

			rich(){
				return this.$modalStore.state.rich;
			},

		},
		methods: {
			closeModal() {
				this.$modalStore.commit('hideModal')
			},
			clickBtn(res) {
				this.$modalStore.commit('hideModal')
				this.$modalStore.commit('success', res)
			}
		},
		beforeDestroy() {
			this.$modalStore.commit('hideModal')
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	._showModal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 10000;

		._shade {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background: rgba(0,0,0,0.4);
			z-index: 11000;
		}

		._modalBox {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 12000;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;

			._modal {
				flex: none;
				width: 600rpx;
				border-radius: 10rpx;
				overflow: hidden;
				background-color: #4E4E5E;
				position: relative;
				.title {
					text-align: center;
					font-size: 16px;
					font-weight: bold;
					color: #fff;
					margin-top: 20px;
				}

				.content {
					min-height: 100rpx;
					width: 100%;
					color: #fff;
					display: flex;
					justify-content: center;
					padding: 50rpx 20rpx;
					box-sizing: border-box;
					align-items: center;
					text-align: center;
					margin-bottom: 88rpx;
					.image {
						width: 222rpx;
						height: 144rpx;
					}
					&1 {
						margin-top: 30rpx;
					}
				}
				.content-left {
					text-align: left;
				}
				.tips {
					color: #FF7A64;
					font-size: 26rpx;
					margin-top: 40rpx;
					text-align: left;
				}
				.btnbox {
					display: flex;
					width: 100%;
					height: 88rpx;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					position: absolute;
					bottom: 0;
					background-color: #6D6D82;
					
					.btn {
						width: 100%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						font-weight: 500;
					}
					.confirm{
						color: #fff;
					}
					.cancel{
						color: rgba(255,255,255,0.5);
					}
				}
			}
		}

	}
	.btn_line{
		height: 66rpx;
		width: 4rpx;
		background-color: #D8D8D8;
	}

</style>
